<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    <div id="app">
      <h1 v-show="flag">你好</h1>
      <h1 v-myshow="flag">世界</h1>
      <button v-permission="powerCode">删除</button>
      <button v-permission="powerCode">重置</button>
      <button v-permission="powerCode">解散公司</button>
    </div>
    <script src="./vue.js"></script>
    <script>
      // 全局自定义指令
      Vue.directive('myshow',{
        bind(){ //指令绑定到元素上
           
        },
        inserted(el,binding){ //指令所在元素被插入页面中
          //  el---代表当前挂载指令的元素  --原生元素
          // binding.value---当前指令后的值
              if(binding.value){
                  el.style.display="block"
              }else{
                el.style.display="none"
              }
        },
        update(el,binding){ //指令所在模板结构被重新解析

        },
        componentUpdated(){ //指令所在模板结构被重新解析

        },
        unbind(){} //指令与元素解绑
      });

      // 路由鉴权方式 2 
      // 按钮级别权限  
        // 1.公司登录后 会返回用户的 身份状态码
        // 我们会存储身份状态码，到本地存储和vuex,
        // 为了方便操作很多按钮，我们会封装一个自定义指令
        // 根据当前用户登录身份，来是否显示或能操作按钮
      Vue.directive('permission',{
        bind(el,binding){

        },
        inserted(){
           //  el---代表当前挂载指令的元素  --原生元素
          // binding.value---当前指令后的值
          if(binding.value==1){
            el.style.display="block"
          }else{
             el.style.display="none"
          }
        },
        update(){},
        componentUpdated(){},
        unbind(){}
       })


      //  
       new Vue({
        el:"#app",
        data(){
          return{
            flag:true,
            powerCode:2 //1 超管 2 普通管理员 3, 普通用户
          }
        },
        directives:{ //局部指令 
          'permission':{ //权限
              bind(){},
                inserted(el,binding){
                  if(binding.value==1){
                    el.style.display="block";
                  }else if(binding.value==2){
                    el.disabled=true;
                  }else{
                    el.style.display="none"
                  }
              },
              update(){},
              componentUpdated(){},
              unbind(){}
          }
        }
       })
    </script>
</body>
</html>